<template>
  <page-loading :show="pageLoading">
    <view class="wrap">
      <car-info-header :carInfo="carInfo" :iconShow="true"></car-info-header>
      <view class="box">
        <view class="center-item" v-for="(info, index) in datas" :key="index">
          <view class="title flex flex-ai-c">
            <view class="left-border"></view>
            <view class="title-text flex-1 color-333 font-32"
              >{{ titleArr[confirmType][index].title }}
              <text class="font-24">{{
                titleArr[confirmType][index].subTitle
              }}</text></view
            >
            <view @click="showMore(index)">
              <text class="font-24 color-999 pr-10">{{
                titleArr[confirmType][index].isShow ? '收起' : '展开'
              }}</text>
              <u-icon
                :name="
                  titleArr[confirmType][index].isShow
                    ? 'arrow-up'
                    : 'arrow-down'
                "
                color="#999"
                size="24rpx"
              ></u-icon>
            </view>
          </view>
          <view class="status-box">
            <view class="status" v-if="confirmType === 3">
              <text class="status-text">
                异常
                <text class="color-EB5C02">{{ info.allList.length }}</text
                >项
              </text>
              <text class="status-text">
                需修复
                <text class="color-EB5C02">{{ needRepairNum }}</text
                >项
              </text>
            </view>
            <view class="status" v-else>
              <text class="status-text">
                正常
                <text class="color-3DB707">{{ info.normal }}</text
                >项
              </text>
              <text class="status-text">
                异常
                <text class="color-EB5C02">{{ info.abnormal }}</text
                >项
              </text>
              <text class="status-text">
                需修复
                <text class="color-EB5C02">{{ info.needRepairNum }}</text
                >项
              </text>
              <text class="status-text" v-if="info.didNotDetect">
                未检测
                <text class="color-EB5C02">{{ info.didNotDetect }}</text
                >项
              </text>
            </view>
          </view>
          <view v-for="(item, i) in info.allList" :key="i">
            <view
              class="status-normal flex flex-jc-sb flex-ai-c color-333"
              v-if="
                confirmType !== 3 &&
                item.detection_State === 1 &&
                titleArr[confirmType][index].isShow
              "
              >{{ item.car_Detection_Typedata_Name }}
              <i-icon
                icon="icontijiaochenggong"
                type="single"
                size="30rpx"
                color="#41CB05"
              ></i-icon>
            </view>
            <view
              class="status-normal flex flex-jc-sb flex-ai-c color-999"
              v-if="
                confirmType !== 3 &&
                item.detection_State === 0 &&
                titleArr[confirmType][index].isShow
              "
              >{{ item.car_Detection_Typedata_Name }}
              <i-icon
                icon="iconwei"
                type="single"
                size="30rpx"
                color="#999999"
              ></i-icon>
            </view>
            <view v-if="item.detection_State === 2 || confirmType === 3">
              <view class="status-abnormal">
                <view class="item-title flex flex-ai-c">
                  <view class="flex-1">
                    <text class="item-name pr-10">
                      {{
                        item.car_Detection_Typedata_Name || item.exceptionName
                      }}
                    </text>
                    <i-icon
                      icon="icontishi"
                      type="single"
                      size="30rpx"
                      color="#EB5C02"
                    ></i-icon>
                  </view>
                  <view class="flex flex-ai-c">
                    <text
                      class="pr-10"
                      :class="item.client_agree ? 'color-3DB707' : 'color-666'"
                      >是否需要修复</text
                    >
                    <u-switch
                      v-model="item.client_agree"
                      active-color="#41CB05"
                      inactive-color="#E1E1E1"
                      size="36"
                      @change="switchChange($event, index)"
                    ></u-switch>
                  </view>
                </view>
                <view class="flex flex-ai-c">
                  <view style="width: 50%">
                    <text class="item-tips">{{
                      item.exceptionMsg || '异常照片'
                    }}</text>
                    <view class="item-img">
                      <image
                        v-if="confirmType == 3"
                        class="img"
                        :src="item.imgs[0]"
                        mode="scaleToFill"
                      />
                      <image
                        v-else
                        class="img"
                        :src="item.url"
                        mode="scaleToFill"
                      />
                      <view class="img-tips">{{
                        item.car_Detection_Typedata_Name || item.exceptionName
                      }}</view>
                    </view>
                  </view>
                </view>
                <view
                  class="item-advice flex flex-ai-c"
                  v-if="confirmType === 1"
                  ><view>处理意见：</view>
                  <view
                    v-if="item.advice_Type === 1"
                    class="advice advice-color"
                    >立即调整/更换</view
                  >
                  <view v-else class="advice">建议调整/更换</view></view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="bottom-item">
          <view class="titel flex" @click="gotoSing">
            <text class="flex-1 color-333 font-32">客户签字</text>
            <text class="color-EB5C02 font-32" v-if="!account_signature_url"
              >等待客户签字确认</text
            >
            <u-icon
              v-if="!account_signature_url"
              class="pl-10"
              name="arrow-right"
              color="#999"
              size="26rpx"
            ></u-icon>
          </view>
          <view class="sign">
            <image
              class="sign-img"
              v-if="account_signature_url"
              :src="account_signature_url"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <view class="btn">
        <button class="btn-primary" @click="submit">提交</button>
      </view>
      <!-- 弹框提示 -->
      <u-popup v-model="popupShow" mode="center" border-radius="20" width="540">
        <view class="popup-content">
          <view class="title">温馨提示</view>
          <view class="content">您有未开启需要修复的异常选项</view>
          <view class="btn-box flex">
            <button class="btn-left" @click="popupCancel">继续提交</button>
            <button class="btn-right" @click="popupConfirme">去开启</button>
          </view>
        </view>
      </u-popup>
    </view></page-loading
  >
</template>
<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader'

export default {
  data() {
    return {
      params: {}, //url参数，用于页面返回跳转
      datas: [],
      account_signature_url: '',
      id: '',
      popupShow: false, //弹窗
      exceptionIds: [], //需修复项
      needRepairNum: 0, //施工异常需修复数量
      isShow: [false, false, false, false], //展开收起
      titleArr: [
        [
          { title: '外观检查', subTitle: '（目视检查）', isShow: false },
          { title: '内饰检查', subTitle: '(功能与目视检查）', isShow: false },
          { title: '仪表盘检查', subTitle: '', isShow: false },
          { title: '其他检查', subTitle: ' (功能与目视检查）', isShow: false },
        ],
        [
          { title: '驾驶舱', subTitle: '', isShow: false },
          { title: '发动机舱', subTitle: '', isShow: false },
          { title: '底盘', subTitle: '', isShow: false },
          { title: '其他检查', subTitle: '', isShow: false },
        ],
        [],
        [{ title: '施工异常项', subTitle: '', isShow: false }],
      ],
      pageTitle: ['预检报告详情', '上检报告详情', '施工异常详情'],
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },

    confirmType() {
      return this.$store.state.afterSales.signData.type
    },
  },

  onLoad(e) {
    this.id = this.$store.state.afterSales.signData.id
    this.params = JSON.parse(e.typeOptions)
    uni.setNavigationBarTitle({
      title: this.pageTitle[this.confirmType],
    })
    uni.$on('userConfirm', (data) => {
      this.account_signature_url = data.userName
    })
    this.getInfo()
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },

  methods: {
    getInfo() {
      if (this.confirmType === 3) {
        this.getExceptionInfo()
      } else if (this.confirmType === 1) {
        this.getDismantInfo()
      } else {
        this.getVisualInfo()
      }
    },

    getVisualInfo() {
      this.$api.afterSales
        .visualCheckReport({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          this.datas = [
            { ...res.data.appearance },
            { ...res.data.interior },
            { ...res.data.dashboard },
            { ...res.data.other },
          ]
          this.pageLoading = true
        })
        .catch((e) => {
          console.log(e)
          this.pageLoading = true
        })
    },

    getDismantInfo() {
      this.$api.afterSales
        .dismantCheckReport({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          this.datas = [
            { ...res.data.cockpit },
            { ...res.data.nacelle },
            { ...res.data.chassis },
            { ...res.data.other },
          ]
          this.pageLoading = true
        })
        .catch((e) => {
          console.log(e)
          this.pageLoading = true
        })
    },

    getExceptionInfo() {
      this.$api.afterSales
        .getArriveOrderException({
          arriveId: this.id,
          SelectAll: false,
        })
        .then((res) => {
          if (res.data.exceptionList.length) {
            this.datas.push({ allList: res.data.exceptionList })
          }
          // uni.hideLoading()
          this.pageLoading = true
        })
        .catch((e) => {
          // uni.hideLoading()
          this.pageLoading = true
        })
    },

    //选择是否修复
    switchChange(e, i) {
      if (this.confirmType === 3) {
        if (e) {
          this.needRepairNum++
        } else {
          this.needRepairNum--
        }
      } else {
        if (e) {
          this.datas[i].needRepairNum++
        } else {
          this.datas[i].needRepairNum--
        }
      }
    },

    //用户签名
    gotoSing() {
      //   this.$store.commit('afterSales/setSignData', {
      //     id: this.id,
      //     type: 0,
      //     figure: 1,
      //   })
      let datas = JSON.stringify({
        type: 'before',
        count: 1,
        fnName: 'qualitySign',
      })
      uni.navigateTo({
        url: '/pages_afterSales/signature/signature?typeOptions=' + datas,
      })
    },

    showMore(i) {
      this.$set(
        this.titleArr[this.confirmType][i],
        'isShow',
        !this.titleArr[this.confirmType][i].isShow
      )
    },

    submit() {
      if (!this.account_signature_url) {
        uni.showToast({
          title: '请客户签字确认',
          icon: 'none',
        })
        return
      }
      let count = 0,
        needRepair = false
      this.exceptionIds = []
      for (let i = 0; i < this.datas.length; i++) {
        for (let j = 0; j < this.datas[i].allList.length; j++) {
          if (this.datas[i].allList[j].client_agree) {
            this.exceptionIds.push(this.datas[i].allList[j].exceptionId)
            count++
          }
          if (this.datas[i].allList[j].detection_State === 2) {
            needRepair = true
          }
        }
      }
      if (count === 0 && needRepair) {
        this.popupShow = true
      } else {
        this.okey()
      }
    },

    okey() {
      this.$api.afterSales
        .addSignature({
          order_Arrive_Store_Id: this.id,
          type: this.confirmType, //0预检,1上检测，2质检交车报告
          figure: 1, //0技师，1客户
          url: this.account_signature_url,
          exceptionIds: this.exceptionIds,
        })
        .then((res) => {
          if (res.data) {
            uni.showToast({
              title: '提交成功',
              duration: 2000,
            })
            setTimeout(() => {
              uni.navigateBack({
                delta: this.params.count,
              })
            }, 2000)
          } else {
            uni.showToast({
              title: '提交失败',
              duration: 2000,
              icon: 'none',
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    popupCancel() {
      this.popupShow = false
      this.okey()
    },

    popupConfirme() {
      this.popupShow = false
      uni.pageScrollTo({
        scrollTop: 0,
      })
    },
  },

  components: {
    carInfoHeader,
  },
}
</script>
<style lang="scss" scoped>
page,
.wrap {
  background: #f6f6f6;
}
.wrap {
  .box {
    background: #ffffff;
    border-radius: 10rpx;
    margin: 20rpx 24rpx 0;

    .bb-2 {
      border-bottom: 2rpx solid #eee;
    }

    .center-item {
      padding: 0 20rpx;

      .title {
        height: 88rpx;
        border-bottom: 2rpx solid #eee;

        .left-border {
          height: 30rpx;
          width: 8rpx;
          border-radius: 4rpx;
          background: #ffe23e;
          margin-right: 10rpx;
        }

        .title-text {
          font-weight: bold;
        }
      }

      .status-box {
        padding-top: 20rpx;

        .status {
          background: #f6f6f6;
          border-radius: 10rpx;
          padding: 0 20rpx;
          display: inline-block;

          .status-text {
            height: 50rpx;
            line-height: 50rpx;
            color: #999;
            padding-right: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
            background: #f6f6f6;
          }
        }
      }

      .status-abnormal {
        border-bottom: 2rpx solid #eee;
        padding-bottom: 30rpx;

        .item-title {
          height: 74rpx;

          .item-name {
            padding-left: 22rpx;
            font-size: 26rpx;
            color: #333;
            font-weight: bold;
          }
        }

        .item-tips {
          display: inline-block;
          background: #fff7f7;
          color: #eb5c02;
          font-size: 24rpx;
          // height: 60rpx;
          // line-height: 60rpx;
          padding: 15rpx 16rpx;
          border-radius: 10px;
          margin-bottom: 20rpx;
          // overflow: hidden;
        }

        .item-tips2 {
          display: inline-block;
          background: #f4fef8;
          color: #3db707;
          font-size: 24rpx;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 16rpx;
          border-radius: 10px;
          margin-bottom: 20rpx;
          overflow: hidden;
        }

        .item-right {
          height: 20rpx;
          width: 98rpx;
        }

        .item-right2 {
          height: 46rpx;
          width: 150rpx;
        }

        .item-img {
          position: relative;
          width: 266rpx;
          height: 200rpx;
          border-radius: 10rpx;
          background: #e1e1e1;

          .img {
            width: 266rpx;
            height: 200rpx;
            border-radius: 10rpx;
          }

          .img-tips {
            position: absolute;
            bottom: 0;
            width: 266rpx;
            height: 50rpx;
            line-height: 50rpx;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 0px 0px 10rpx 10rpx;
            color: #fff;
            padding: 0 20rpx;
            font-size: 22rpx;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .item-advice {
          height: 98rpx;
          color: #999;
          font-size: 24rpx;

          .advice {
            height: 58rpx;
            line-height: 58rpx;
            padding: 0 12rpx;
            border-radius: 29rpx;
            border: 2rpx solid #d0d0d0;
          }

          .advice-color {
            color: #eb5c02;
            border-color: #eb5c02;
          }
        }
      }

      .status-normal {
        height: 74rpx;
        padding-left: 22rpx;
        font-size: 26rpx;
        font-weight: bold;
        border-bottom: 2rpx solid #eee;
      }

      .fw-400 {
        font-weight: 400;
      }

      .pl-20 {
        padding-left: 20rpx;
      }

      .pr-10 {
        padding-right: 10rpx;
      }

      .pl-0 {
        padding-left: 0;
      }

      .font-20 {
        font-size: 20rpx;
      }

      .color-3DB707 {
        color: #3db707;
      }

      .color-EB5C02 {
        color: #eb5c02;
      }
    }

    .bottom-item {
      padding: 0 20rpx;
      .titel {
        padding: 20rpx 0;
      }

      .sign {
        height: 140rpx;

        .sign-img {
          height: 140rpx;
          margin-left: 150rpx;
          width: 460rpx;
        }
      }
    }
  }
}

.btn {
  margin-top: 20rpx;
  padding: 16rpx 24rpx;
  background: #fff;

  .btn-primary {
    width: 100%;
  }
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    .btn {
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-left {
      width: 50%;
      border-radius: 39rpx 0 0 39rpx;
      height: 78rpx;
      font-size: 30rpx;
      background: #333;
      color: #ffe23e;
    }

    .btn-right {
      width: 50%;
      border-radius: 0 39rpx 39rpx 0;
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
      background: linear-gradient(-90deg, #fdd421, #ffe23e);
    }
  }

  button {
    background: linear-gradient(-90deg, #fbd220, #ffe23e);
    border-radius: 44rpx;

    &::after {
      border: 0;
    }
  }
}

/deep/ uni-button:after {
  border: none;
}
</style>
